<style lang="scss" scoped>
    .upload-list{
        $size:80px;
        .el-upload--picture-card{
            // 上传图片
            width: $size;
            height: $size;
            line-height: normal;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            >i{
                font-size: 16px;
            }
        }
        .el-upload-list--picture-card .el-upload-list__item{
            width: $size;
            height: $size;
        }
    }

</style>
<template>
    <div class="p20">
        <ui-title>晒提款</ui-title>
        <el-form :model="form" ref="form" class="ui-form">
            <el-form-item label="选择彩金" prop="couponID" :rules="{required:true,message:'选择一项彩金'}">
                <el-select v-model="form.couponID" placeholder="请选择">
                    <el-option v-if="item.name && item.id" v-for="item in couponList" :key="item.id" :label="item.name" :value="item.id">
                        <div class="flex col-center">
                            <ui-img :url="item.company_ico" size="23px" class="ui-circle bg-grey mr10"></ui-img>
                            {{item.name}}
                        </div>
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="提款金额" prop="amount" :rules="{required:true,message:'填写金额'}">
                <el-input v-model="form.amount" type="number" placeholder="输入提款的金额" min="0"></el-input>
            </el-form-item>
            <el-form-item label="提款截图" prop="userUploadImgs" :rules="{validator: isUploaded, trigger: 'submit'}">
                    <!-- 上传列表 -->
                    <el-upload
                    :action="$http.config.baseURL + '/index.php?g=asset&m=asset&a=plupload'"
                    list-type="picture-card"
                    :on-preview="uploadPictureCardPreview"
                    :on-remove="uploadRemove"
                    :on-change="uploadAdd"
                    :before-upload="beforeUpload"
                    :on-success="uploadSuccess" 
                    :with-credentials="true"
                    :data="{app:'CouponExtra'}"
                    :file-list="form.imgs"
                    :multiple="true"
                    :disabled="userUploadImgs.length>3"
                    >
                    <i class="el-icon-plus"></i>
                    </el-upload>
            </el-form-item>
            <el-form-item label="晒图心情" prop="content" :rules="{required:true,message:'填写晒图感言'}">
                <el-input v-model="form.content" type="textarea" placeholder="发表一下奖励感言,低调地炫耀一下吧" :rows="5" style="width:400px"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="submit" type="primary">提交</el-button>
            </el-form-item>
        </el-form>

        <!-- 大图阅览 -->
        <el-dialog v-model="uploadDialogVisible" size="tiny">
            <img width="100%" :src="uploadImgSrc">
        </el-dialog>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                couponList:[],

                // 上传
                uploadImgSrc:'',
                uploadDialogVisible:false,
                userUploadImgs:[],

                form:{
                    amount:'',
                    couponID:'',
                    content:'',
                    imgs:[]
                }
            }
        },
        mounted(){
            // 获取用户已领取优惠券
            this.$http.get('index.php?g=home&m=GameCoupon&a=user_draws',{
                params:{
                    type:1 //1可用 2已过期
                }
            })
            .then(({data})=>{
                console.log('用户已领取的优惠券',data);
                if (data.code==1) {
                    // 获取已领取的优惠券
                    if (data.data.length>0) {
                        this.couponList = data.data
                    }else{
                        this.$alert('你需要先领取一张优惠券才能晒单')
                        .then(() => {
                            this.$router.go(-1)
                        })
                    }
                }else{
                    this.$message.error(data.msg)
                }
            })
        },
        methods:{
            uploadPictureCardPreview(file) {
              this.uploadImgSrc = file.url;
              this.uploadDialogVisible = true;
            },
            uploadRemove(file, fileList) {
                // console.log(file, fileList);
                let filepath = file.response.data.filepath
                this.userUploadImgs.forEach((item,index,array)=>{
                    if (item === filepath) {
                        array.splice(index,1)
                    }
                })
            },
            // 图片上传
            beforeUpload(file,fileList) {
                const typeVaild = file.type === 'image/jpeg' || file.type === 'image/png';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!typeVaild) {
                    this.$message.error('图片只能是 JPG 或 PNG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('图片大小不能超过 2MB!');
                }

                let vaild = typeVaild && isLt2M

                return vaild
            },
            uploadSuccess(res, file){
                console.log('图片上传完成:', res);
                if (res.code===1) {
                    // 生成本地预览
                    this.uploadImgSrc = URL.createObjectURL(file.raw)

                    // 加入图片池
                    this.userUploadImgs.push(res.data.filepath)
                }
            },
            uploadAdd(file,fileList){
                if (fileList.length>3) {
                    this.$message('最多上传3张!')
                    this.form.imgs = fileList.slice(-3);
                }
            },
            submit(){
                this.$refs['form'].validate((valid) => {
                    if (!valid) return;

                    // 提交
                    this.$http.post('index.php?g=home&m=Comments&a=post_comments',{
                        is_extract:1,
                        amount: this.form.amount,
                        id:this.form.couponID,
                        content:this.form.content,
                        img: this.userUploadImgs.concat(this.form.imgs),
                        date: this.$date('yyyy-MM-dd', new Date()),
                    })
                    .then(({data})=>{
                        console.log('提交晒提款',data)
                        if (data.code===1) {
                            this.$message.success(data.msg||'晒提款成功')
                            this.$router.replace({
                                name:'彩金详情',
                                query:{
                                    id:this.form.couponID
                                }
                            })
                        }else{
                            this.alert(data.msg||'晒提款失败')
                        }
                    })
                });
            },
            isUploaded(rule, value, callback) {
                let imgs = this.userUploadImgs.concat(this.form.imgs)
                if (imgs && imgs.length>0) {
                    callback();
                } else {
                    callback(new Error('至少上传一张图'));
                }
            }
        },
    }
</script>